modern.IE 是微軟新推出的一套免費的瀏覽器測試工具長久以來，瀏覽器兼容性測試一直是困擾前端工程師的工作之一。雖然隨著IE9的普及和IE10的發(fā)布，這項工作變的越來越輕松，但是舊版本的IE瀏覽器仍然占據(jù)了較多的市場份額，微軟此時推出modern.IE網(wǎng)站，顯然是想推動網(wǎng)絡(luò)更快的向前發(fā)展。

modern.IE平臺可分為兩個部分：一個是用于檢測常見代碼問題的Web掃描工具，另一個是與BrowserStack合作的免費虛擬測試服務(wù)。

一個代碼檢測向?qū)?/h3>

代碼掃描其實并不是新鮮事物，說到 Web掃描工具，開發(fā)者們肯定會想到另外兩款產(chǎn)品 —— PageSpeed和 YSlow。PageSpeed和YSlow分別是Google和Yahoo推出的網(wǎng)站性能測試工具。2款產(chǎn)品都是通過檢測代碼分析網(wǎng)站性能，檢測的規(guī)則主要是JavaScript與CSS文件優(yōu)化、圖片壓縮和減少服務(wù)器請求和查詢，優(yōu)化的最終目的是提高網(wǎng)頁加載速度。

但modern.IE與眾不同地方在于，它專注于那些可能會導(dǎo)致舊版本IE瀏覽器出現(xiàn)問題的代碼，是以解決瀏覽器兼容性為最終目標(biāo)的檢測工具。只需要幾秒時間，modern.IE 就能掃描一個網(wǎng)頁并創(chuàng)建一份報告，其中羅列了可能會導(dǎo)致兼容性問題或影響用戶體驗的常見錯誤。

代碼檢測向?qū)壳爸С?類共10種常見問題：

(一)解決關(guān)于兼容舊版IE的常見問題

自從新版的IE9與IE10開始支持HTML5標(biāo)準(zhǔn)，而舊版本的IE卻不支持，開發(fā)者通常需要為兩者編寫不同的代碼。這使得測試不同版本的IE變得非常棘手 —— 比如找出兼容模式下不支持的特性、讓docmode告訴瀏覽器它支持web標(biāo)準(zhǔn)、不小心使用了一個過時的jQuery框架。如果網(wǎng)站在最新版或預(yù)發(fā)行版中會引發(fā)兼容性問題，modern.IE也會提示您，使開發(fā)者可以更從容的在不同的版本間規(guī)劃和解決問題。

• 已知的兼容性問題（Known compatibility issues）
• 兼容模式（Compatibility Mode）
• 框架和庫（Frameworks & libraries）
• 網(wǎng)絡(luò)標(biāo)準(zhǔn)文檔模式（Web standards docmode）

(二)幫助網(wǎng)站在多種瀏覽器和設(shè)備上正常運行

向?qū)н€包括了一系列最佳實踐，讓網(wǎng)頁可以適用于日益增加的各種設(shè)備 —— 不論是手機(jī)、臺式機(jī)、平板電腦，甚至是大屏幕電視。

實施特性檢測、采用CSS前綴的最佳實踐編碼、搭建無插件網(wǎng)站、使用響應(yīng)式網(wǎng)頁設(shè)計，都可以減少跨瀏覽器、跨設(shè)備的測試時間，并提供更穩(wěn)定的用戶體驗。

• CSS 前綴（CSS-prefixes）
• 瀏覽器插件（Browser plug-ins）
• 響應(yīng)式網(wǎng)頁設(shè)計（Responsive web design）
• 瀏覽器檢測（Browser detection）

(三)結(jié)合Windows 8 中的一些新特性構(gòu)建網(wǎng)站

這包括觸控瀏覽和“開始”屏幕網(wǎng)站磁貼。開發(fā)者可利用Windows的這些新功能，為用戶提供更加個性化的瀏覽體驗。

• 觸控瀏覽（Touch-browsing）
• “開始”屏幕網(wǎng)站磁貼（Start screen site tile）

這里以某網(wǎng)站網(wǎng)站為例，介紹modern.IE的使用方法。

打開modern.IE的網(wǎng)站首頁，在頁面的下方就可以看到一個碩大輸入框。

輸入網(wǎng)址，點擊Scan按鈕。網(wǎng)頁就會跳轉(zhuǎn)到掃描頁面，并開始掃描。

只需數(shù)秒，網(wǎng)站報告就會生成到頁面上。

報告一共分為3大類10條規(guī)則，點擊條目可以展開對應(yīng)的詳細(xì)信息，詳細(xì)信息中可以看到該規(guī)則的問題原因、重要性和解決方法。
如果規(guī)則前的圖標(biāo)是對勾，則表示網(wǎng)站符合該條規(guī)則。如果圖標(biāo)是感嘆號，那么就有問題需要您完善了。
某網(wǎng)站一共掃描出了5個需要改進(jìn)的規(guī)則，我們來一個個看下。

第一個規(guī)則是“框架和庫”（Frameworks & libraries）

在這條規(guī)則中，modern.IE發(fā)現(xiàn)網(wǎng)站使用了過時的jQuery庫版本，所以會建議您應(yīng)該升級庫的最接近的兼容版本（需要少許測試）或是最新版本（需要更多測試）。

第二個規(guī)則是“Web標(biāo)準(zhǔn)的 docmode”（Web standards docmode）

modern.IE 發(fā)現(xiàn)網(wǎng)站沒有使用DocType，從而可能使網(wǎng)站無法在IE9或IE10中獲的最好的體驗。使用DocType，可以在IE瀏覽器中提升30%的網(wǎng)站性能。

如何修復(fù)？詳細(xì)信息的最右邊給出了解決方法的鏈接。

第三個規(guī)則是”響應(yīng)式網(wǎng)頁設(shè)計”（Responsive web design）

網(wǎng)站沒有使用響應(yīng)式設(shè)計，這不是個技術(shù)錯誤，但是應(yīng)用這項技術(shù)可以提升用戶體驗，減少為特定設(shè)備開發(fā)的支出。所以，moderen.IE給出的建議是“建議增強(qiáng)”。并給出了3條學(xué)習(xí)響應(yīng)式網(wǎng)頁設(shè)計的鏈接。

最后2條規(guī)則是關(guān)于結(jié)合Windows 8新特性構(gòu)建網(wǎng)站

Windows 8 有2個和網(wǎng)站相關(guān)的新特性，觸控瀏覽和“開始”屏幕網(wǎng)站磁貼。開發(fā)者利用Windows的這些新功能，可以為用戶提供更加個性化的瀏覽體驗。
如何實現(xiàn)？右側(cè)依舊給出了詳細(xì)的教程鏈接。

通過modern.IE檢測，開發(fā)人員就可以輕松地了解網(wǎng)頁存在的問題，從而有針對性的一步步完善您的網(wǎng)站，相信完善后的網(wǎng)站一定會擁有優(yōu)秀的瀏覽器兼容性，用戶體驗也更上一個層級。

BrowserStack免費虛擬測試服務(wù)

以前開發(fā)者要測試不同設(shè)備上的瀏覽器，需要自己維護(hù)測試設(shè)備或者映像，而且瀏覽器版本太多，您也不可能擁有每種設(shè)備和瀏覽器。

而BrowserStack 是一個云服務(wù)，這意味著開發(fā)者不再需要花費心思在維護(hù)自己的測試設(shè)備和映像上，不論開發(fā)人員使用何種設(shè)備或操作系統(tǒng)，通過BrowserStack，開發(fā)人員可以像訪問網(wǎng)頁一樣輕松的進(jìn)行測瀏覽器兼容性測試，通過瀏覽器就可以遠(yuǎn)程操作各個系統(tǒng)上的不同瀏覽器。

打開modern.IE中的虛擬工具頁面，在左側(cè)的BrowserStack模塊中輸入要測試的網(wǎng)址，點擊右側(cè)按鈕就會跳轉(zhuǎn)到BrowserStack的注冊頁面.

只需簡單的填寫郵箱、密碼和昵稱就注冊好了。

然后就會自動跳轉(zhuǎn)到測試頁面，等待幾秒，讓網(wǎng)頁加載Flash并連接云端服務(wù)器。

等待連接成功，您就能在右側(cè)看到頁面了，默認(rèn)連接的是Windows 8下的IE10瀏覽器。

接著您就可以像平時瀏覽網(wǎng)頁一樣操控頁面了。

如果您想測試其他系統(tǒng)的瀏覽器，比如Windows Vista下的IE9，就可以在左側(cè)的面板中依次選擇系統(tǒng)和瀏覽器，然后點擊Update，更新服務(wù)器。

您也可以調(diào)出IE自帶的F12開發(fā)人員工具對網(wǎng)頁進(jìn)行調(diào)試。

OS X和Android的瀏覽器也都可以云端測試。

您還可以在左側(cè)設(shè)置分辨率，是否全屏、自適應(yīng)和加載速度。
如果您的測試網(wǎng)站無法公開訪問，您也可以通過基于Java的安全隧道，使用BrowserStack的本地服務(wù)器測試。modren.IE還推出了面向Chrome和Firefox的加載項，這樣在這些瀏覽器中就能輕松地對IE進(jìn)行兼容性測試。

現(xiàn)在，modern.IE和BrowserStack合作，為所有通過modern.IE連接此服務(wù)的Web開發(fā)人員提供三個月的免費服務(wù)。
此外，modern.IE也為開發(fā)人員提供了不論是在 Mac、Linux、PC下都能使用的本地端Windows IE瀏覽器的免費虛擬映像，用來進(jìn)行測試。
如果您正為測試瀏覽器兼容性而煩惱的話，就快來試試modern.IE 吧！

================關(guān)于優(yōu)設(shè)網(wǎng)================
“優(yōu)設(shè)網(wǎng)uisdc.com”是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。

特色推薦：
設(shè)計講座：定期邀請國內(nèi)互聯(lián)網(wǎng)公司的設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：15335158）分享實戰(zhàn)經(jīng)驗。
設(shè)計微博：我們擁有粉絲量25萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎大家關(guān)注及時獲取設(shè)計資源。
設(shè)計導(dǎo)航：史上最贊最全面的設(shè)計師網(wǎng)址導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的”福利”嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您還可以掃描下方二維碼快速添加：